<template>
	<view class="container">
		<view class='bg-color-white info'>
			<uni-forms :modelValue="addressForm" label-width="100px">
				<view class="pr30 pl30">
					<uni-forms-item label="收货人姓名">
						<uni-easyinput v-model="addressForm.name" placeholder="请输入收货人姓名" :inputBorder="false"
							placeholder-style="font-size: 28rpx;" />
					</uni-forms-item>
					<uni-forms-item label="收货人手机号">
						<uni-easyinput v-model="addressForm.phone" maxlength="11" placeholder="请输入手机号"
							:inputBorder="false" placeholder-style="font-size: 28rpx;" />
					</uni-forms-item>
					<uni-forms-item label="所在地区">
						<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
							@change="pickerChange" @columnchange="pickerColumnchange">
							<view class="">{{addressForm.cityConcat}}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="详细地址">
						<uni-easyinput v-model="addressForm.detail" placeholder="街道、楼牌号等详细地址" :inputBorder="false"
							placeholder-style="font-size: 28rpx;" />
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="fixed-button flex_m bt1" v-if="addressForm.id">
			<view class="bttom-btn-danger" @click='onDeleteAddress'>删除</view>
			<view class="bttom-btn" @click='onSaveAddress'>保存</view>
		</view>
		<view class="fixed-button flex_m bt1" v-else>
			<view class="bttom-btn" @click='onSaveAddress'>保存</view>
		</view>
	</view>
</template>

<script>
	import {
		qzApi
	} from '@/config/request.js';
	export default {
		data() {
			return {
				addressForm: {
					id: undefined,
					provinceId: 0, //省份id
					cityId: 0, //城市id
					countryId: 0, //区县id
					cityConcat: '请选择所在省份、城市、区县',
					userId: 0,
					name: undefined,
					phone: undefined,
					detail: undefined,
				},
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				oldpProvinceDataList: [],
				addressId: ""

			}
		},
		methods: {
			async getCityAll() {
				try {
					const data = await qzApi.cityAll();
					this.oldpProvinceDataList = data.data?data.data:[]
					for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
						this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name)
					}
					// 市
					for (let i = 0; i < this.oldpProvinceDataList[0].children.length; i++) {
						this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].children[i].name)
					}
					// 区县
					for (let i = 0; i < this.oldpProvinceDataList[0].children[0].children.length; i++) {
						this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].children[0].children[i].name)
					}
				} catch (error) {
					// 处理错误
					console.error('信息失败:', error);
				}
			},
			pickerChange (e) {
				this.multiIndex = e.detail.value
				// 数组内的下标
				// console.log(JSON.stringify(multiIndex.value))
				// 获取省市区总数据
				console.log(this.newProvinceDataList[0][this.multiIndex[0]])
				console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				
				this.addressForm.provinceId = this.oldpProvinceDataList[this.multiIndex[0]].id //省份id
				this.addressForm.cityId = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[
						1]]
					.id //城市id
				this.addressForm.countryId = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]]
					.children[this.multiIndex[2]].id
				this.addressForm.cityConcat = this.newProvinceDataList[0][this.multiIndex[0]] + '-' +
					this.newProvinceDataList[1][this.multiIndex[1]] + '-' +
					this.newProvinceDataList[2][this.multiIndex[2]]
				console.log(this.addressForm)
			},
			 pickerColumnchange (e){
				// 第几列滑动
				console.log("第几列滑动 = " + JSON.stringify(e.detail.column))
				// 第几列滑动选中的下标
				console.log("第几列滑动选中的下标 = " + JSON.stringify(e.detail.value))
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// 第二列更新相应的数据
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].children.map((item,
						index) => {
						return item.name
					})
					if (this.oldpProvinceDataList[this.multiIndex[0]].children.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[0]
							.children
							.map((
								item,
								index) => {
								return item.name
							})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[
							this.multiIndex[1]].children.map((item, index) => {
							return item.name
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[
							1]].children.map((item, index) => {
						return item.name
					})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			//修改获取地址详情
			async getArressDetailRequest(id){
				try {
					const data = await qzApi.getAddressDetail(id);
					console.log(data)
					if (data.data) {
						this.addressForm = data.data
					}
				} catch (error) {
					// 处理错误
					console.error('信息失败:', error);
				}
			},
			//保存地址
			async onSaveAddress(){
				if (!this.addressForm.name) {
					uni.showToast({
						title: '收货人姓名不为空',
						icon: 'none'
					})
					return false
				}
				if (this.addressForm.name.length > 8 || this.addressForm.name.length < 2) {
					uni.showToast({
						title: '请填写正确的收货人姓名',
						icon: 'none'
					})
					return false
				}
				if (!this.addressForm.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return false
				}
				const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!reg.test(this.addressForm.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return false
				}
				if (!this.addressForm.cityId) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
					return false
				}
				if (!this.addressForm.detail) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return false
				}
				try {
					const data = await qzApi.addAddress(this.addressForm);
					if (data.code === 0) {
						uni.showToast({
							title: this.addressForm.id ? '修改成功' : '添加成功',
							icon: 'success'
						})
						uni.navigateBack({
							delta: 1
						})
					}
				} catch (error) {
					// 处理错误
					console.error('失败:', error);
				}
			},
			//删除收货地址
			 async onDeleteAddress(){
				const id = this.addressForm.id
				uni.showModal({
					content: '确定要删除当前地址?',
					success: (res) => {
						if (res.confirm) {
							deleteAddressRequest(id)
						} else if (res.cancel) {}
					}
				})
			},
			async deleteAddressRequest(id){
				if (id) {
					try {
						const data = await qzApi.deleteAddress(id);
						if (data.code == 0) {
							uni.showToast({
								icon: 'success',
								title: '删除成功'
							})
							wx.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: data.msg
							})
						}
					} catch (error) {
						console.log('getAddressList', error);
					} finally {
						uni.hideLoading()
					}
				}
			}
		},
		onLoad(query) {
			this.getCityAll();
			this.addressForm.id = query.addressId;
			uni.setNavigationBarTitle({
				title: query.addressId ? '地址详情' : '添加地址'
			})
			if (this.addressForm.id) {
				this.getArressDetailRequest(this.addressForm.id)
			}
		},
	}
</script>

<style>
</style>
<style lang="scss" scoped>
	:deep(.uni-forms-item) {
		border-top: 1rpx solid #e5e5e5;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 0rpx;
		padding: 10rpx 0;
		
		.uni-forms-item__label {
			height: auto;
		}

		.uni-forms-item__content {
			display: flex;
			align-items: center;

			.uni-easyinput__content-input {
				padding-right: 20rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.checklist-group {
				justify-content: flex-end;

				.checklist-box {
					margin-right: 0;
					margin-left: 50rpx;
				}
			}
		}

		
	}
	.pickerList {
		height: 100%;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
	:deep(.uni-forms-item:first-child) {
		border-top: none;
	}
</style>